import React, { useState,useEffect } from 'react';
import '../static/style/commponents/Header.css'
import {Row,Col,Menu,Icon } from 'antd'
import Router from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import  servicePath  from '../config/apiUrl'
const Header =()=>{
    const [navArray , setNavArray] = useState([])
    useEffect (()=>{
        // 数据更新会调用执行。去获取数据更新初始值
        const fetchData = async ()=>{
            const result= await axios(servicePath.getTypeInfo).then(
                 (res)=>{
                     setNavArray(res.data.data)
                     return res.data.data
                 }
               )
            setNavArray(result)
         }
         fetchData()
    },[])
    // 点击跳转路由
    const handleClick = (e)=>{
        if(e.key==0){
            Router.push('/index')
        }else{
            // 顺带传值过去
            Router.push('/list?id='+e.key)
        }
  
  
    }
  return  (
    <div className='header'>
    {/* xs: <576px响应式栅格。
sm：≥576px响应式栅格.
md: ≥768px响应式栅格.
lg: ≥992px响应式栅格.
xl: ≥1200px响应式栅格.
xxl: ≥1600px响应式栅格. */}
      <Row type='flex' justify='center'>
          <Col xs={24} sm={24} md={10} lg={10} xl={12}>
          <span className="header-logo">你好</span>
          <span className="header-txt">欢迎来到小姐姐前端开发。</span>
          </Col>
          <Col xs={0} sm={0} md={14} lg={8} xl={6}>
          <Menu mode='horizontal'  onClick={handleClick}>
          <Menu.Item key="0">
                  <Icon type="home" />
                  首页
              </Menu.Item>
              {/* <Menu.Item key="video">
                  <Icon type="youtube" />
                  视频
              </Menu.Item>
              <Menu.Item key="life">
                  <Icon type="smile" />
                  生活
              </Menu.Item> */}
              {
                  navArray.map((item)=>{
                      return(
                        <Menu.Item key={item.Id}>
                        <Icon type={item.icon} />
                        {item.typeName}
                        </Menu.Item>  
                      )
                  })
              }
          </Menu>
          </Col>
     
      </Row>
  </div>
  )
}
export default Header